<template>
  <vue-draggable-resizable
    :w="350"
    :h="dragHeight"
    :min-width="350"
    :max-width="350"
    :min-height="dragHeight"
    :max-height="dragHeight"
    :parent="false"
    :active="true"
    :x="left"
    :y="top"
    :z="999"
    :grid="[10,0]"
    class-name="listView-panel-drag"
    class-name-handle="my-handle-class"
    @dragging="onDrag"
  >
    <div class="listView">
      <closePanel @closePanelfunc="closePanelfunc" :closetitle=closetitle></closePanel>
      <div class="yjzy">
        <div class="search-box">
          <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select" size="small">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>

        <div id="qyList" class="yjzyCon content">
          <div class="col-small col-big activate">
            <div class="container1">
              <div class="container2">
                <span class="numSpan">1</span>
                <div class="line1">
                  贵阳德昌祥药业有限公司
                  <span class="typeLabel typeLabel1">医药制造</span>
                  <span class="typeLabel typeLabel2">
                    <a @click="showDetailView">详情</a>
                  </span>
                </div>
                <div class="line2">电话：0851-8407666</div>
                <div class="line3">地址:贵州省贵阳市修文县前进南路36号</div>
              </div>
            </div>
          </div>
          <div class="col-small col-big">
            <div class="container1">
              <div class="container2">
                <span class="numSpan">2</span>
                <div class="line1">
                  贵阳德昌祥药业有限公司
                  <span class="typeLabel typeLabel1">医药制造</span>
                  <span class="typeLabel typeLabel2">
                    <a @click="showDetailView">详情</a>
                  </span>
                </div>
                <div class="line2">电话：0851-8407666</div>
                <div class="line3">地址:贵州省贵阳市修文县前进南路36号</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </vue-draggable-resizable>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import closePanel from "./closePanel.vue";
export default {
  name: "listView",
  props: [],
  components: {closePanel},
  data() {
    return {
      left: document.documentElement.clientWidth - 360,
      top: 15,
      dragHeight: document.documentElement.clientHeight - 20,
      searchVal:'',
      closetitle:"列表"
    };
  },
  mounted() {},
  computed: {

  },
  methods: {
    ...mapMutations(["changeDetailViewLayer","changeListViewLayer"]),
    showDetailView(){
      this.$store.commit("changeDetailViewLayer",true)
    },
    onDrag(x, y) {
      this.left = x;
    },
    closePanelfunc(){
      this.$store.commit("changeListViewLayer",false)
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.listView {
  height: 100%;
  .search-box{
    margin: 15px 20px;
    input{
      background: rgba(0,0,0,0.5);
      border: 1px solid #73FFFF;
    }
  }
  .yjzyCon {
    box-sizing: border-box;
    background: rgba(0, 48, 64, 0.4);
    border: 1px solid rgba(64, 108, 130, 0.4);
    border-radius: 5px;
    overflow: auto;
    margin: 10px 15px 20px 20px;
    .col-big {
      width: 100%;
      float: left;
      box-sizing: border-box;
      padding: 0 10px;
      margin-top: 10px;
      .container1 {
        padding: 0 0 5px 0;
        border-bottom: 1px dotted #447b98;
        .container2 {
          cursor: pointer;
          position: relative;
          background: rgba(77, 139, 172, 0.3);
          padding: 5px;
          .numSpan {
            position: absolute;
            left: 5px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background: url(../images/bg13.png) no-repeat center;
            text-align: center;
            color: #ffffff;
            font-size: 12px;
            font-family: arial;
          }
          .line1 {
            color: #26ffff;
            font-size: 14px;
            padding-left: 30px;
            position: relative;
            .typeLabel {
              color: #92b9cc;
              font-size: 12px;
              position: absolute;
              right: 0;
              top: 0;
            }
            .typeLabel1{
              right: 40px;
            }
            .typeLabel2{
              color:$fontColorW;
            }
          }
          .line2 {
            font-family: "宋体";
            color: #92bacd;
            font-size: 12px;
            line-height: 20px;
            padding-left: 30px;
          }
          .line3 {
            font-family: "宋体";
            color: #92bacd;
            font-size: 12px;
            line-height: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            padding-left: 30px;
          }
        }
      }
    }
  }
  .yjzy{
    border: 1px solid #73ffff;
    background-color: rgba(0, 48, 64, 0.6);
    height: calc(100% - 71px);
    display: inline-block;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" >
.listView {
  .search-box{
    margin: 15px 20px;
    input{
      background: rgba(0,0,0,0.5);
      border: 1px solid #73FFFF;
      color: #fff;
    }
    .el-input-group__append{
      background: rgba(0,0,0,0.5);
      border: 1px solid #73FFFF;
      color: #fff;
    }
  }
}
.listView-panel-drag {
  border: 1px solid #73ffff;
  background-color: rgba(0, 48, 64, 0.6);
  cursor: move;
  .my-handle-class {
    width: 10px;
    height: 10px;
    background: transparent;
    position: absolute;
  }
  .my-handle-class-tl {
    z-index: 999;
    cursor: nw-resize;
  }
  .my-handle-class-tm {
    width: 100%;
    cursor: n-resize;
  }
  .my-handle-class-tr {
    top: 0;
    right: 0;
    z-index: 999;
    cursor: ne-resize;
  }
  .my-handle-class-mr {
    height: 100%;
    right: 0;
    cursor: e-resize;
    z-index: 1000;
  }
  .my-handle-class-br {
    bottom: 0;
    right: 0;
    z-index: 999;
    cursor: se-resize;
  }
  .my-handle-class-bm {
    bottom: 0;
    width: 100%;
    cursor: s-resize;
  }
  .my-handle-class-bl {
    bottom: 0;
    left: 0;
    z-index: 999;
    cursor: sw-resize;
  }
  .my-handle-class-ml {
    height: 100%;
    cursor: e-resize;
    z-index: 1000;
  }
}
</style>
